%input-error {
  .br-input__input {
    border-color: $danger-color;
    color: $danger-color;

    // error时输入框之后的图标也变成红色
    & + .icon {
      color: $danger-color;
    }
  }
}

.br-input {
  position: relative;
  &__input {
    border:0;
    box-sizing: border-box;
    border-width: $input-normal-border-width;
    border-style: solid;
    border-color: $input-normal-border-color;
    display: inline-block;
    width: 100%;
    color: $text-color;
    font-size: $font-size;
    font-family: '微软雅黑';
    padding-left: $input-padding-x;
    padding-right: $input-padding-x;
    outline: none;
    height: $input-normal-height;
    line-height: $input-normal-height;

    // placeholder 颜色自定义
    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color: $text-placeholder-color;
    }
    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: $text-placeholder-color;
    }
    &::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: $text-placeholder-color;
    }
    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: $text-placeholder-color;
    }

     &::-ms-clear {
       display: none;
     }
     &:hover {
       box-shadow: 0 0 0 3px $input-shadow-border-color;
       border-radius: 1px;
     }
     &:focus {
       box-shadow: 0 0 0 3px $input-shadow-border-color;
       border-radius: 1px;
     }
  }
  .icon {
    position: absolute;
    line-height: $input-normal-height;
    right: 10px;
    font-size: 14px;
    color: #989898;
  }
  &--disabled &__input {
    border-color: $input-disabled-border-color;
    color: $text-help-color;
    background-color: $input-disabled-background-color;
    pointer-events: none;
  }

  &--xl &__input {
    height: $input-xl-height;
    line-height: $input-xl-height;
  }
  &--xl {
    .icon {
      line-height: $input-xl-height;
    }
  }
  &--lg &__input {
    height: $input-lg-height;
    line-height: $input-lg-height;
  }
  &--lg {
    .icon {
      line-height: $input-lg-height;
    }
  }
  &--sm &__input {
    height: $input-sm-height;
    line-height: $input-sm-height;
  }
  &--sm {
    .icon {
      line-height: $input-sm-height;
    }
  }
  &--xs &__input {
    height: $input-xs-height;
    line-height: $input-xs-height;
  }
  &--xs {
    .icon {
      line-height: $input-xs-height;
    }
  }
}


// form-control 或者 form-group 或者 input 设置error，都显示错误信息
.br-form-group--error,
.br-form-control--error,
.br-input--error {
  @extend %input-error;
}

.prompt{
  color: red;
}
